<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>护理项目</title>
<meta name="decorator" content="default" />
</head>
<body>
	<div class="container">
		<div data-role="navbar">
			<ul>
				<li><a href="${ctx}/cash/consume/buyStoreProductPage">产品项目</a></li>
				<li><a href="${ctx}/cash/consume/doStoreCarePage"
					class="ui-btn-active">护理项目</a></li>
			</ul>
		</div>
		<form:form id="inputForm2" modelAttribute="shoppingCart"
			action="${ctx}/cash/consume/payNonmembers" method="post"
			class="form-input">
			<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
			<input id="pageSize" name="pageSize" type="hidden"
				value="${page.pageSize}" />
			<form:input id="employeeProduct-ID" name="employeeProduct-ID"
				type="hidden" path="employeeProduct.id" />
			<div class="icon-buttons">
				<input type="button" data-inline="true" data-icon="delete"
					onclick="return  cashPro.dropNomemberShopping('${ctx}')"
					data-iconpos="notext" value="取消消费" /> <input type="submit"
					data-inline="true" data-icon="check" data-iconpos="notext"
					value="确认消费" />
			</div>
		</form:form>
		<br />
		<div class="tab-pane ${focusEvent.storeSelfCare?'active':''} "
			id="careTab2">
			<table id="contentTable" data-role="table"
				class="ui-responsive table-stroke">
				<thead>
					<tr>
						<th colspan="5" style="text-align:center;">已选产品</th>
					</tr>
					<tr>
						<th>护理项目</th>
						<th>护理周期</th>
						<th>护理次数</th>
						<th>零售价</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<c:forEach items="${shoppingCart.cares}" var="careCart">
						<tr id="${careCart.id}">
							<c:if test="${careCart.storeCare.care_type==1}">
								<td>${careCart.storeCare.storeSelfCare.name}</td>
								<td>${careCart.storeCare.storeSelfCare.duration}</td>
								<td>${careCart.count}</td>
								<td>${careCart.storeCare.storeSelfCare.price/careCart.storeCare.storeSelfCare.times}</td>
								<td><a data-role="button" data-inline="true"
									data-icon="delete" data-iconpos="notext"
									onclick="deleteTr('确定删除护理：${careCart.storeCare.storeSelfCare.name}?','${careCart.id}')">删除</a>
								</td>
							</c:if>
							<c:if test="${careCart.storeCare.care_type==0}">
								<td>${careCart.storeCare.care.name}</td>
								<td>${careCart.storeCare.care.duration}</td>
								<td>${careCart.count}</td>
								<td>${careCart.storeCare.care.price/careCart.storeCare.care.times}</td>
								<td><a data-role="button" data-inline="true"
									data-icon="delete" data-iconpos="notext"
									onclick="deleteTr('确定删除护理：${careCart.storeCare.care.name}?','${careCart.id}')">删除</a>
								</td>
							</c:if>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="pagination">${page}</div>
			<form:form id="inputForm" modelAttribute="storeCare"
				action="${ctx}/cash/consume/storeCare/add" method="post">
				<form:hidden path="storeCare.id" id="storeCareID" />
				<input type="hidden" id="type" name="type" value="" />
				<div data-role="fieldcontain" id="selectionfields">
					<label>护理项目:</label>
					<form:input type="text" id="storeCareName" readonly="true"
						path="storeCare.storeSelfCare.name" required="required" />
					<a id="selectButton" href="#select_care_dialog2" data-rel="popup"
						data-role="button" data-inline="true" data-position-to="window"
						data-transition="pop">系统护理</a> <a id="selectButton"
						href="#select_care_dialog" data-rel="popup" data-role="button"
						data-inline="true" data-position-to="window" data-transition="pop">店面护理</a>
				</div>

				<div data-role="fieldcontain">
					<label>护理周期</label>
					<form:input path="storeCare.storeSelfCare.duration" type="text"
						id="storeCareDuration" readonly="true" />
				</div>
				<div data-role="fieldcontain">
					<label>零售价格</label>
					<form:input path="storeCare.storeSelfCare.price" type="text"
						id="storeCarePrice" readonly="true" />
				</div>
				<div data-role="fieldcontain">
					<label>护理次数</label>
					<form:input path="count" type="text" id="storeCareCount"
						readonly="true" />
				</div>
				<div data-role="fieldcontain">
					<label>服务专员:</label>
					<form:select id="storeCareEmployeeID" path="employee.id"
						name="storeCareEmployeeID">
						<c:forEach var="e" items="${employees}">
							<option value="${e.id}" ${e.id==employee.id?'selected':''}>${e.name}</option>
						</c:forEach>
					</form:select>
				</div>
				<div>
					<p>
						<strong>注意:散客消费仅限单次护理，若要多次护理，请先加入会员，然后在会员消费中选择该护理</strong>
					</p>
				</div>
				<div id="okbutton" style="margin: auto; text-align: center;">
					<button type="submit" onclick="return checkStoreCare()"
						data-inline="true">确认添加</button>
				</div>
			</form:form>
		</div>
	</div>
	<div data-role="popup" id="select_care_dialog">
		<div data-role="header">
			<h1>选择护理项目</h1>
		</div>
		<div data-role="content"
			style="overflow:scroll;height:25em;width: 20em;" id="selectCareEvent">
			<ul data-role="listview" data-filter="true"
				data-filter-placeholder="搜索">
			</ul>
		</div>
		<!-- /content -->
		<div data-role="footer">
			<a href="#" data-rel="back" data-role="button" data-inline="true"
				data-icon="back">取消</a>
		</div>
	</div>
	<div data-role="popup" id="select_care_dialog2">
		<div data-role="header">
			<h1>选择护理项目</h1>
		</div>
		<div data-role="content"
			style="overflow:scroll;height:25em;width: 20em;" id="selectCareEvent">
			<ul data-role="listview" data-filter="true"
				data-filter-placeholder="搜索">
			</ul>
		</div>
		<!-- /content -->
		<div data-role="footer">
			<a href="#" data-rel="back" data-role="button" data-inline="true"
				data-icon="back">取消</a>
		</div>
	</div>
	<script type="text/javascript">
		function registerSelection(dialogID, type) {
			$(dialogID + " ul li").delegate("a", "click", function() {
				var item = $(this);
				$("#type").val(type);
				$("#storeCareID").val(item.attr("id"));
				$("#storeCareName").val(item.attr("name"));
				$("#storeCareDuration").val(item.attr("duration"));
				$("#storeCarePrice").val(item.attr("price"));
				$(dialogID).popup("close");
				$("#inputForm").valid();
			});
		}//registerSelectionListener
		function doCommit() {
			jQuery.ajax({
				url : "clientAddCare",
				type : "post",
				data : {
					careID : function() {
						return $("#storeCareID").val();
					},
					employeeID : function() {
						return $("#storeCareEmployeeID").val();
					},
					amount : function() {
						return $('#storeCareCount').val();
					},
					type : $("#type").val(),
				},
				success : function(data) {
					var objs = eval(data);
					showTip(objs.result);
					if (objs[0].result) {
						showTip("添加成功");
						addItem($("#type").val(), objs[0].cartID);
						clear();
					} else {
						showTip(objs[0].message);
					}
				},
				error : function(data) {
					showTip("保存失败");
				}
			});// end ajax
		}

		function removeItem(trID) {
			removeChild("tbody", trID);
			$("#contentTable").trigger("create");
		}

		function deleteTr(message, cartID) {
			global.confirm(message, function() {
				jQuery.ajax({
					url : "clientDeleteCare",
					type : "post",
					data : {
						"cartID" : cartID,
					},
					success : function(data) {
						showTip(data);
						var objs = eval(data);
						if (objs[0].result) {
							showTip("删除成功");
							removeItem(cartID);
						} else {
							showTip(objs[0].message);
						}
					},
					error : function(data) {
						showTip("删除失败");
					}

				});// end ajax
			});// confirm
		}

		function registerSubmitHandler(productNameKey) {// validateInputForm
			$("#inputForm").validate({
				submitHandler : function(form) {
					doCommit();
				},
				focusInvalid : false,
				rules : {
					count : {
						required : true,
						digits : true,
						min : 1,
						max : 10000
					},
					productNameKey : {
						required : true
					}
				},
				errorContainer : "#messageBox",
				errorPlacement : function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox") || element.is(":radio")) {
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				},
				messages : {}
			});// validate
		}
		function removeItem(careID) {
			removeChild("tbody", careID);
			$("#contentTable").trigger("create");
		}

		function clear() {
			$("#type").val("");
			$("#storeCareID").val("");
			$("#storeCareName").val("");
			$("#storeCareDuration").val(0);
			$("#storeCarePrice").val(0);
		}

		function addItem(type, cartID) {
			var pName = $("#storeCareName").val();
			var duration = $("#storeCareDuration").val();
			var pid = $("#storeCareID").val();
			var amount = $("#storeCareCount").val();
			var retailPrice = $("#storeCarePrice").val();
			var line = "<tr id="+ cartID
					+ ">"
					+ "<td>"
					+ pName
					+ "</td>"
					+ "<td>"
					+ duration
					+ "</td>"
					+ "<td>"
					+ amount
					+ "</td>"
					+ "<td>"
					+ retailPrice
					+ "</td>"
					+ "<td>"
					+ "<a data-role='button' data-inline='true' data-icon='delete' data-iconpos='notext' onclick="
					+ "deleteTr('确定删除护理：" + pName + "?','" + cartID
					+ "')>删除</a>" + "</td>" + "</tr>";
			$("#contentTable").append(line);
			$("#contentTable").trigger("create");
		}

		$().ready(function() {
			loadingCareList("#select_care_dialog", "self");
			loadingCareList("#select_care_dialog2", "system");
			registerSubmitHandler();
			$("#inputForm").valid();
			cashPro.submitShopping("#inputForm2", "${ctx}");
			disableExitMenu();
		});

		function loadingCareList(dialogID, type) {
			jQuery
					.ajax({
						url : "clientLoadingCare",
						type : "post",
						data : {
							"type" : type,
						},
						success : function(data) {
							var objs = eval(data);
							var addedIds = eval(objs[0].addedCares);
							var html = "";
							for (var index = 1; index < objs.length; index++) {
								var element = objs[index];
								html += "<li><a name='" + element.name + "' description='"
								+ element.description + "'	id='" + element.id + "'	duration='" + element.duration+ "' times='" + element.times+ "' typeString='" + element.typeString
								+ "' price='" + element.retailPrice + "' href='#'>"
										+ element.name + "</a></li>";
							}
							$(dialogID + " ul").append(html);
							$(dialogID + " ul").listview('refresh');
							registerSelection(dialogID, type);
							for (index = 0; index < addedIds.length; index++) {
								element = addedIds[index];
								$(dialogID + " ul" + " a#" + element.id).hide();
							}
						},
						error : function(data) {
							showTip("加载产品列表失败");
						}
					});// end ajax
		};
	</script>
</body>
</html>
